<html>
    <head>
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no minimal-ui"/>
        <meta name="format-detection" content="telephone=no"/>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache,no-store, must-revalidate">
        <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
        <meta HTTP-EQUIV="expires" CONTENT="0">
        <title>Webview页面标题</title>
        <script type="text/javascript">
            
            let u = navigator.userAgent;
            let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
            let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            
            function jsCallNative() {
                var message = {
                    "type":"reply",
                    "message": "this is a message from js"
                };

                var jsonString = JSON.stringify(message);
                
                if (isIOS) {
                    console.log("调用iOS的句柄");
                    window.webkit.messageHandlers.handleMessageFromJS.postMessage(jsonString);
                }
                
                if (isAndroid) {
                    console.log("调用Android的句柄");
                    // .android是指安卓那边定义的类，必须和安卓统一，也有可能.xxx,这个可以随便定义
                    // webView.addJavascriptInterface(javaMethod,"android");
                    // 目前像下面这样写,安卓端是能够响应的

                    // 这个地方实际上需要看flutter_webview_plugin/JavaScriptChannel.java里面的实现:https://github.com/fluttercommunity/flutter_webview_plugin/blob/master/android/src/main/java/com/flutter_webview_plugin/JavaScriptChannel.java
                    // Android端是通过addJavascriptInterface(@NonNull Object object, @NonNull String name)这个方法
                    // 里面的name来区分不同的注册在js端的方法名前缀,这里的name是handleMessageFromJS
                    // 在Android端会实现一个和postMessage一模一样的方法名,去实现对应的方法,这一点和iOS是有区别的
                    // 在iOS中postMessage是一个规范式,必须这么写才能,js的事件才能传递出去
                    /*
                    iOS端是通过区分不同的message: WKScriptMessage中的name来区分不同的js方法,name可能会有跟多个
                    Android端是通过映射不同方面来做区分,name可能只有一个,但是@JavascriptInterface定义的函数有很多个

                    mWebView.addJavascriptInterface(new Object() {
                                @JavascriptInterface
                                public void handleMessageFromJS(String msg) {
                                    /// 根据msg执行相应的逻辑
                                    Log.i("JavaScript to Native", msg);

                                    /// jsonString转Map
                                    Type type = new TypeToken<Map<String, String>> () {}.getType ();
                                    Map<String, String> map = new Gson ().fromJson (msg, type);
                                    String message = map.get("message");
                                    Log.i("message", message);

                                    Toast toast = Toast.makeText(LocalHtmlActivity.this, message, Toast.LENGTH_SHORT);
                                    //显示吐司
                                    toast.show();
                                }
                            }, "android");

                    */

                    window.handleMessageFromJS.postMessage(jsonString);
                }
            }
            
            function sendMessageToDiscussList(object) {
                var model = JSON.parse(object);
                document.getElementById("result").innerText = model.message;
                return "Hello,Native!";
            }

            // function sendMessageToDiscussList(message) {
            //     console.log("Flutter调用js方法");
            //     console.log(message);
            //     var model = message;
            //     document.getElementById("result").innerText = model;
            //     return "Hello,Native!";
            // }
            
        </script>
    </head>

    <body>
        Hello,world!<br />
        <span id="result">
            
        </span><br />
        <button onclick="jsCallNative()">JS call Native</button><br />
    </body>
</html>
